<template>
	<div>
		<el-row :span="24">
			<!-- pc -->
			<el-col :sm="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex" :navs="navs" :changeNav="changeNav"></PcDrawer>
					<div class="bghhhhh" style="overflow: scroll;height: 100vh;padding-bottom: 50px;">
						<div class="rightCon">
							<headerPcTow :title="info.title" :isShow="true"></headerPcTow>
							<div class="rightConBox">
								<div class="conTow" v-if="info" v-html="info.content">

								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<!-- h5 -->
			<el-col :sm="0" :xs="24">
				<navHeader :title="info.title"></navHeader>

				<div class="con" v-if="info" v-html="info.content">

				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import headerPcTow from '../../components/headerPcTow.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer,
			headerPcTow
		},
		data() {
			return {
				info: null,
				selecttab: 0,
				navIndex: 0,
				navs: [{
						id: 2,
						name: this.$t('l_dianzi'),
						key: 'icon_dtfl_dz_0',
					},
					{
						id: 7,
						name: this.$t('l_qipai'),
						key: 'icon_dtfl_qp_0',
					},
					{
						id: 6,
						name: this.$t('l_buyu'),
						key: 'icon_dtfl_by_0',
					},
					{
						id: 1,
						name: this.$t('l_zhenren'),
						key: 'icon_dtfl_zr_0',
					},
					{
						id: 4,
						name: this.$t('l_tiyu'),
						key: 'icon_dtfl_ty_0',
					},
					{
						id: 3,
						name: this.$t('l_caipiao'),
						key: 'icon_dtfl_cp_0',
					},
					{
						id: -4,
						name: this.$t('l_sousuo'),
						key: 'comm_icon_ss',
					},
				]
			}
		},
		created() {
			this.ArticleGetDetail(this.$route.query.id)
		},
		methods: {
			openMenus() {
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus() {
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav(item) {
				this.$router.push('/')
			},
			ArticleGetDetail(id) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$api.ArticleGetDetail({
					id: id,
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						this.info = res.data
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			changetab(e) {
				this.selecttab = e;
			},
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	/* pc */
	.bghhhhh {
		flex: 1;
		height: 300px;
	}

	.rightCon {
		width: 75%;
		margin: 0 auto;
	}

	.pc_con {
		width: 100%;
		display: flex;
		justify-content: flex-start;
	}

	.header {
		width: 100%;
		height: 36px;
		background: var(--theme-main-bg-color);
		background: var(--theme-main-bg-color);
		border: 1px solid var(--theme-color-line);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 0.2rem;
	}

	.rightConBox {
		padding: 15px 0px;
		box-sizing: border-box;
		background-color: var(--theme-main-bg-color);
		border-radius: 4px;
		margin-top: 20px;
	}

	.headerTow {
		width: 100%;
		height: 36px;
		border-bottom: 1px solid var(--theme-color-line);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20px;
	}

	.hitem {
		height: 0.72rem;
		border-bottom: 2px solid transparent;
		line-height: 0.72rem;
		font-size: 12px;
		color: #fff;
		margin-left: 30px;
	}

	.hitemTow {
		height: 30px;
		border-bottom: 2px solid transparent;
		line-height: 30px;
		font-size: 14px;
		color: #fff;
		margin-left: 30px;
		cursor: pointer;
	}

	.hitem:first-child {
		margin-left: 0;
	}

	.hitemTow:first-child {
		margin-left: 0;
	}

	.hitem.active {
		color: var(--theme-primary-color);
		border-bottom: 2px solid var(--theme-primary-color);
	}

	.hitemTow.active {
		color: var(--theme-primary-color);
		border-bottom: 2px solid var(--theme-primary-color);
	}

	.con {
		/* background-color: #0e131b; */
		border-radius: 0;
		padding: 0.2rem 0.2rem 0.8rem;
		font-size: 0.22rem;
		/* color: var(--theme-text-color);*/
		color: var(--theme-text-color);
	}

	.conTow {
		border-radius: 0;
		padding: 10px 30px 20px;
		font-size: 15px;
		color: var(--theme-text-color);
	}
</style>